<template>
	<view class="main">
		<u-navbar title="聊天设置"></u-navbar>
		<view class="users flex flex-ai-c flex-jc-sb">
			<view class="flex flex-ai-c">
				<view class="head-img">
					<image style="border-radius: 50%;" :src="gather.info.handimg||`${gather.baseUrl}/headimg/1686558935248-.jpg`"></image>
				</view>
				<view style="margin-left: 20rpx;">{{gather.info.username}}</view>
			</view>
			<view>
				<u-icon name="arrow-right" @click="goPage(false)" size="30rpx" color="rgba(0,0,0,0.3)"></u-icon>
			</view>
		</view>

		<view class="set">
			<view class="flex flex-jc-sb flex-ai-c set-list">
				<view>聊天记录</view>
				<u-icon size="16" name="arrow-right"></u-icon>
			</view>
		</view>

		<view class="set">
			<view class="flex flex-jc-sb flex-ai-c set-list">
				<view>消息免打扰</view>
				<u-switch v-model="gather.disturb"></u-switch>
			</view>
			<view class="flex flex-jc-sb flex-ai-c set-list">
				<view>顶置聊天</view>
				<u-switch v-model="gather.overhead"></u-switch>
			</view>
		</view>

		<view class="set">
			<view class="flex flex-jc-sb flex-ai-c set-list">
				<view>备注</view>
				<u-input style="margin-left: 20rpx;" placeholder="" input-align="right" v-model="gather.name"></u-input>
				<u-icon size="16" name="arrow-right"></u-icon>
			</view>
			<view class="flex flex-jc-sb flex-ai-c set-list">
				<view>特别关心</view>
				<view class="flex">
					<view>未设置</view>
					<u-icon size="16" name="arrow-right"></u-icon>
				</view>
			</view>
		</view>

		<view class="set">
			<view class="flex flex-jc-sb flex-ai-c set-list">
				<view>设置聊天背景</view>
				<u-icon size="16" name="arrow-right"></u-icon>
			</view>
			<view class="flex flex-jc-sb flex-ai-c set-list">
				<view>清空聊天记录</view>
				<u-icon size="16" name="arrow-right"></u-icon>
			</view>
		</view>

		<view class="set">
			<view class="set-list out" @click="cancel">
				<view>取消关注</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import chat from '@/api/chat.js'
	import {
		reactive,
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	interface info{
		[propName: string]: any
	}
	let gather = reactive< info >({
		isHove: false,//鼠标是否悬停
		disturb: false,//免打扰
		overhead: false,//顶置
		name: '',//群昵称
		menberList: [],
		selfInfo: uni.getStorageSync('userinfo'),//自己的
		info: {},
		// @ts-ignore
		baseUrl: uni.$baseUrl
	})
	const cancel = async () => {
		const res = await chat.followCancel({
			id: gather.info.fid,
		})
		uni.showToast({
			title: '取消成功',
			icon: 'none',
			success: () => {
				uni.navigateBack({
					delta: 2
				})
			}
		})
	}
	const goPage = (type : Boolean, str = '') => {
		if (!type) return uni.navigateBack()
		uni.navigateTo({
			url: str
		})
	}
	
	onLoad((op) => {
		gather.info = JSON.parse(op.list)
		
	})
</script>

<style lang="scss" scoped>
	page {
		background-color: rgb(241, 243, 244);
	}

	.main {

		.nav {
			position: fixed;
			width: 100%;
			height: 80rpx;
			border: 1px solid red;
		}

		.users {
			padding: 20rpx;
			background-color: #fff;
			//头像
			font-size: 18rpx;

			.more {
				height: 80rpx;
				margin-top: 20rpx;
				color: gray;
				font-size: 28rpx !important;
			}

			.head-img {
				width: 80rpx;
				height: 80rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
					border: 1px solid rgb(200, 200, 200);
				}
			}

			&-list {
				width: 20%;

				.icon {
					border: 1px dashed rgb(130, 130, 130);
					height: 80rpx;
					width: 80rpx;
				}
			}
		}

		.set {
			margin-top: 20rpx;
			padding: 0 20rpx;
			background-color: #fff;
			line-height: 80rpx;

			&-list {
				border-bottom: 1px solid rgb(241, 243, 244);
			}

			.out {
				text-align: center;
				color: red;
			}
		}
	}
</style>